<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form action="" method="get">
      <input type="text" name="name" />
      <br />
      <input type="text" name="age" required /> <br />
      <input type="email" name="email" /> <br />
      <input type="submit" value="提交" />
    </form>
    <hr />
    <style>
      :required {
        background-color: orange;
      }
      :invalid {
        /* background-color: red; */
      }
      :valid {
        background-color: green;
      }
    </style>

    <ul>
      <h2>123</h2>
      <li>111</li>
      <li>222</li>
      <li class="active">333</li>
      <li>444</li>
      <li>555</li>
      <div id="xxx">xxx</div>

      <li>666</li>

      <input type="number" name="age" min="0" max="150" />
    </ul>

    <style>
      ::selection {
        background-color: orange;
      }
      /* ul *:not(li.active) {
        background-color: red;
      } */

      input[name="age"]:in-range {
        background-color: green;
      }
      input[name="age"]:out-of-range {
        background-color: red;
      }
    </style>

    <div></div>
    <div>12</div>

    <br />s <br />
    s<br />s <br />
    s<br />s <br />
    s<br />s <br />
    s <br />s <br />
    s<br />s <br />
    s<br />s <br />
    s<br />s <br />
    s <br />s <br />
    s<br />s <br />
    s<br />s <br />
    s<br />s <br />
    s

    <div id="yyy">yyy</div>
    <br />s <br />
    s<br />s <br />
    s<br />s <br />
    s<br />s <br />
    s <br />s <br />
    s<br />s <br />
    s<br />s <br />
    s<br />s <br />
    s <br />s <br />
    s<br />s <br />
    s<br />s <br />
    s<br />s <br />
    s <br />s <br />
    s<br />s <br />
    s<br />s <br />
    s<br />s <br />
    s <br />s <br />
    s<br />s <br />
    s<br />s <br />
    s<br />s <br />
    s <br />s <br />
    s<br />s <br />
    s<br />s <br />
    s<br />s <br />
    s <br />s <br />
    s<br />s <br />
    s<br />s <br />
    s<br />s <br />
    s <br />s <br />
    s<br />s <br />
    <div id="zzz">zzz</div>

    s<br />s <br />
    s<br />s <br />
    s <br />s <br />
    s<br />s <br />
    s<br />s <br />
    s<br />s <br />
    s <br />s <br />
    s<br />s <br />
    s<br />s <br />
    s<br />s <br />
    s <br />s <br />
    s<br />s <br />
    s<br />s <br />
    s<br />s <br />
    s

    <div style="background-color: rgb(0, 68, 255); position: fixed; right: 0; top: 0">
      <a href="#xxx">#xxx</a>
      <a href="#yyy">#yyy</a>
      <a href="#zzz">#zzz</a>
    </div>

    <style>
      /* .active + li {
        background-color: red;
      } */

      /* .active ~ li {
        background-color: red;
      } */

      /* 
      [href] 有属性
      [href=xxx] 全等于
      [href~=xxx] 包含单词 xxx yyy
      [href|=xxx] -连接 xxx-yyy


      [href^=xxx] 开始 xxx-yyy xxx yyy xxxyyy
      [href$=xxx] 结束
      [href*=xxx] 包含字符串 123xxxyyy
      
      */

      /* p:first-child  p是父级的第一个子元素 */

      /* ul li:first-child {
        background-color: red;
      } */

      /* p:first-of-type 所有兄弟元素的第一个p */

      /* ul li:first-of-type {
        background-color: red;
      } */

      /* ul li:nth-of-type(2) {
        background-color: red;
      } */

      /* ul li:nth-of-type(2n) {
        background-color: red;
      } */
      /* ul li:nth-of-type(3n) {
        background-color: red;
      }

      div:empty {
        width: 100px;
        height: 100px;
        background-color: red;
      } */

      /* hash 活动目标 */
      :target {
        border: 2px solid #d4d4d4;
        background-color: #e5eecc;
      }
    </style>

    <form action="">
      <input type="text" />
      <input type="text" disabled />

      <input type="checkbox" name="" id="" />
      <input type="checkbox" name="" id="" />
    </form>

    <style>
      :enabled {
        /* background-color: green; */
        /* width: 100px;
            height: 100px; */
      }
      :disabled {
        /* background-color: red; */
      }
      :checked {
        width: 100px;
        height: 100px;
      }
    </style>
  </body>
</html>
